<template>
    <view class='container'>
        <view class='binding-phone'>
            <view class='item'>
                <text class='item-tip'>手机号码:</text>
                <input placeholder='输入手机号码'  type='number' maxlength='11' v-model="phonenum" />
            </view>
            <view class='item '>
                <text class='item-tip'>验证码:</text>
                <input placeholder='输入验证码' type='number' v-model="code" />
                <text class='get-code gray' @click='getCodeNumber'>获取验证码</text>
            </view>
        </view>
        <view class='btn-box'>
            <text v-if="phonenum && code" v-model="phonenum" class='sure-btn' @click="bindMobile">确定</text>
            <text v-if="!phonenum || !code" v-model="code" class='sure-btn gray'>确定</text>
        </view>
    </view>
</template>
<script>
import {mapActions} from 'vuex'
export default {
    data(){
        return {
            phonenum:'',
            code:''
        }
    },
    methods:{
        ...mapActions({
            getVerification:'user/getVerification'
        }),
        getCodeNumber(){
            if(!this.phonenum){
                wx.showToast({
                    title:'请输入手机号',
                    icon:'none'
                })
                return;
            }
            this.getVerification(this.phonenum)
        },
        bindMobile(){
            console.log(this.phonenum,this.code,'phonename...');
        }
    }
}
</script>
<style src='./binding-phone.css' scoped>

</style>
